<template>
  <v-container fluid>
    <v-row>
      <v-col cols="12">
        <v-data-table
            :headers="headers"
            :items="adminUsers"
            item-key="uid"
            class="elevation-1"
            disable-filtering
            disable-sort
            :loading="loading"
            :options.sync="options"
            :server-items-length="totalUser"
            loading-text="正在加载~"
            no-data-text="没有数据"
            no-results-text="找不到哦"
            :footer-props="{itemsPerPageAllText:'所有',itemsPerPageText:'每页条数'}"
        >
          <template v-slot:top>
            <v-toolbar flat color="secondary">
              <v-toolbar-title>管理员管理</v-toolbar-title>
              <v-spacer></v-spacer>
              <v-text-field height="20"
                            dense
                            class="mt-7"
                            v-model="searchUser"
                            outlined
                            label="用户名称"
                            @keypress.enter.stop="doSearchUser"
              >
                <template v-slot:append>
                  <v-icon @click="doSearchUser">
                    mdi-magnify
                  </v-icon>
                </template>
              </v-text-field>
              <v-btn icon @click="openAddPrivilege">
                <v-icon>mdi-plus-circle-outline</v-icon>
              </v-btn>
            </v-toolbar>
          </template>
          <template v-slot:item.actions="{ item }">
            <v-icon
                @click="openDelPrivilege(item)"
            >
              mdi-account-minus
            </v-icon>
          </template>
        </v-data-table>
      </v-col>
    </v-row>
<!--    添加新管理员-->
    <v-dialog
        v-model="AddAdminDialog"
        max-width="800px"
    >
      <v-card>
        <v-card-title>
          选择新管理员
        </v-card-title>
        <v-card-text>
          <v-data-table
              :headers="headers"
              :items="newUsers"
              item-key="uid"
              class="elevation-1"
              :options.sync="newOptions"
              :server-items-length="totalNewUser"
              :loading="newLoading"
              loading-text="正在加载~"
              no-data-text="没有数据"
              no-results-text="找不到哦"
              :footer-props="{itemsPerPageAllText:'所有',itemsPerPageText:'每页条数',showCurrentPage:true}"
          >
            <template v-slot:top>
              <v-toolbar flat>
                <v-spacer></v-spacer>
                <v-text-field height="20"
                              dense
                              class="mt-7"
                              v-model="searchAddUser"
                              outlined
                              label="用户名称"
                              @keypress.enter.stop="openAddPrivilege"
                >
                  <template v-slot:append>
                    <v-icon @click="openAddPrivilege">
                      mdi-magnify
                    </v-icon>
                  </template>
                </v-text-field>
              </v-toolbar>
            </template>
            <template v-slot:item.actions="{ item }">
              <v-icon
                  @click="addUserPrivilege(item)"
              >
                mdi-account-plus
              </v-icon>
            </template>
          </v-data-table>
        </v-card-text>
        <v-card-actions>
          <v-btn color="grey" class="ml-auto mr-2" dark @click="AddAdminDialog = false">取消</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
<!--    删除用户权限-->
    <v-dialog
        v-model="DelAdminDialog"
        max-width="800px"
    >
      <v-card>
        <v-card-title>
          确认删除 {{ formDel.nickname }} 的管理员权限吗？
        </v-card-title>
        <v-card-actions>
          <v-btn color="grey" class="ml-auto mr-2" dark @click="DelAdminDialog = false">取消</v-btn>
          <v-btn color="red" dark @click="delAdminPrivilege(formDel)">删除</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import {simpleCopy, rules} from "../../util/util";

export default {
  name: "AdminManage",
  data: () => ({
    rules: rules,
    AddAdminDialog: false,
    DelAdminDialog: false,
    searchUser: '',
    searchAddUser:'',
    headers: [
      {text: '用户ID', value: 'uid', align: 'center', sortable: false},
      {text: '用户名称', value: 'nickname', align: 'center', sortable: false},
      {text: '手机号码', value: 'phone', align: 'center', sortable: false},
      {text: '操作', value: 'actions', align: 'center', sortable: false,},
    ],
    adminUsers: [],
    newUsers:[],
    formDel: {
      uid: '',
      nickname: '',
    },
    options:{},
    newOptions:{},
    totalUser:0,
    totalNewUser:0,
    loading:false,
    newLoading:false,


  }),
  watch: {
    options: {
      handler () {
        this.doSearchUser()
      },
      deep: true,
    },
    newOptions: {
      handler () {
        this.openAddPrivilege()
      },
      deep: true,
    },
  },
  methods: {
    doSearchUser() {
      this.loading = true
      const { sortBy, sortDesc, page, itemsPerPage } = this.options
      let data = {
        nickname: this.searchUser,
        page:page,
        row:itemsPerPage
      }
      this.$http.post('/admin/listAdministrators', data).then(res => {
        this.adminUsers = res.data
        this.loading = false
        this.totalUser = res.total
      }).catch(res => {
        this.$emit('toast', res.msg)
        this.loading = false
      })
    },
    openDelPrivilege(item) {
      simpleCopy(item, this.formDel)
      this.DelAdminDialog = true
    },
    openAddPrivilege() {
      this.newLoading = true
      const { sortBy, sortDesc, page, itemsPerPage } = this.newOptions
      let data = {
        nickname: this.searchAddUser,
        page:page,
        row:itemsPerPage
      }
      this.$http.post('/admin/listUsers', data).then(res => {
        this.newUsers = res.data
        this.totalNewUser = res.total
        this.newLoading =false
      }).catch(res => {
        this.$emit('toast', res.msg)
        this.newLoading =false
      })
      this.AddAdminDialog = true
    },
    delAdminPrivilege(item) {
      let data = {
        uid: item.uid,
        privilege: 1
      }
      this.$http.post('/user/changeInfo', data).then(res => {
        this.DelAdminDialog = false
        this.searchUser = ''
        this.doSearchUser()
      }).catch(res => {
        this.$emit('toast', res.msg)
      })
    },
    addUserPrivilege(item){
      let data = {
        uid: item.uid,
        privilege: 2
      }
      this.$http.post('/user/changeInfo', data).then(res => {
        this.AddAdminDialog = false
        this.searchAddUser = ''
        this.adminUsers = []
        this.doSearchUser()
      }).catch(res => {
        this.$emit('toast', res.msg)
      })
    }
  },
  beforeMount() {
    this.doSearchUser()
  }
}
</script>

<style scoped>

</style>
